<template>
  <div>
    <div style="margin: 20px 30px">
      <el-page-header @back="goBack" content="项目列表"></el-page-header>
    </div>
    <div class="interval" id="list">
      <div style="display:flex;align-items: center;margin-top: 30px">
        <el-input style="width:200px;margin-right: 20px" placeholder="项目名称" clearable v-model="searchInfo.projectName"></el-input>
        <el-button type="primary" @click="search()">搜索</el-button>
        <router-link to="/base/projectAdd">
          <el-button type="primary" style="margin-left: 20px">新增项目</el-button>
        </router-link>
      </div>
      <el-table border :data="tableData" style="margin-top: 30px" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
        <!--        <el-table-column label="序号" prop="pk"></el-table-column>-->
        <el-table-column label="项目名称" min-width="100px">
          <template slot-scope="scope">
            <router-link :to='"/base/moduleList/?projectId="+scope.row.pk'>{{scope.row.fields.project_name}}</router-link>
          </template>
        </el-table-column>
        <el-table-column label="总负责人" prop="fields.responsible_name"></el-table-column>
        <el-table-column label="测试人员" prop="fields.test_user"></el-table-column>
        <el-table-column label="开发人员" prop="fields.dev_user"></el-table-column>
        <el-table-column label="发布应用" prop="fields.publish_app"></el-table-column>
        <el-table-column label="简要描述" prop="fields.simple_desc" min-width="100px"></el-table-column>
        <el-table-column label="其他信息" prop="fields.other_desc" min-width="100px"></el-table-column>
        <el-table-column label="模块数量" prop="pk" min-width="100px" :formatter="moduleNum"></el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">{{scope.row.fields.create_time | timeFormat}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--            <el-button @click.native.prevent="runRow(scope.$index, tableData)" type="text" size="small">运行</el-button>-->
            <el-button @click.native.prevent="editRow(scope.$index, tableData)" type="text" size="small">编辑</el-button>
            <el-button @click.native.prevent="projectDel(scope.$index,tableData)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--编辑项目-->
      <el-dialog :title="dialog_title" :visible.sync="dialogFormVisible" width="650px">
        <el-form :model="projectInfo" inline label-width="80px" style="width: 600px" label-position="right">
          <el-form-item label="项目名称:">
            <el-input style="width: 400px" v-model="projectInfo.fields.project_name"></el-input>
          </el-form-item>
          <el-form-item label="负责人:">
            <el-input style="width: 400px" v-model="projectInfo.fields.responsible_name"></el-input>
          </el-form-item>
          <el-form-item label="测试人员:">
            <el-input style="width: 400px" v-model="projectInfo.fields.test_user"></el-input>
          </el-form-item>
          <el-form-item label="开发人员:">
            <el-input style="width: 400px" v-model="projectInfo.fields.dev_user"></el-input>
          </el-form-item>
          <el-form-item label="发布应用:">
            <el-input style="width: 400px" v-model="projectInfo.fields.publish_app"></el-input>
          </el-form-item>
          <el-form-item label="简要描述:">
            <el-input type="textarea" :rows="2" style="width: 400px" v-model="projectInfo.fields.simple_desc"></el-input>
          </el-form-item>
          <el-form-item label="其他信息:">
            <el-input type="textarea" :rows="2" style="width: 400px" v-model="projectInfo.fields.other_desc"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible=false">取消</el-button>
          <el-button @click="projectEdit()">确定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--分页-->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchInfo.currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="searchInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
    name: "projectList",
    data() {
        return {
            tableData: [],
            total: 1, //项目总数,1为一个没有意义的数，起占位作用
            searchInfo: {
                projectName: '',
                pageSize: 10,
                currentPage: 1
            },
            dialogFormVisible: false,
            dialog_title: "编辑项目",
            projectInfo: {
                id: "",
                fields:
                    {
                        project_name: "",
                        responsible_name: "",
                        test_user: "",
                        dev_user: "",
                        publish_app: "",
                        simple_desc: "",
                        other_desc: "",
                    }
            },
        }
    },
    filters: {
        timeFormat: function (data) {
            return moment(data).format("YYYY-MM-DD")
        }
    },
    methods: {
        getInfo() {
            this.$axios.get("api/projectList/")
                .then(res => {
                    this.tableData = res.data.projectList;
                    this.total = res.data.projectNum;
                })
        },
        projectDel(index, rows) {
            let projectId = rows[index].pk;
            this.$axios.delete("api/projectDel/", {data: {"projectId": projectId}})
                .then(res => {
                    console.log(res);
                    if (res.data.msgCode === "1") {
                        console.log("删除数据成功");
                        this.getInfo();
                    } else {
                        console.log("删除数据失败");
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        },
        editRow(index, rows) {
            // 打开编辑弹框
            this.projectInfo.fields = rows[index].fields;
            this.projectInfo.id = rows[index].pk;
            console.log(this.projectInfo);
            this.dialogFormVisible = true;
        },
        projectEdit() {
            //编辑项目
            this.$axios.put('api/projectEdit/', {'projectInfo': this.projectInfo})
                .then(res => {
                    console.log(res);
                    if (res.data.msgCode === "1") {
                        console.log("编辑项目成功");
                        this.dialogFormVisible = false;
                    } else if (res.data.msgCode === '0') {
                        this.$message('项目名称重复');
                    } else {
                        console.log("编辑项目失败");
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        },
        //获取项目对应的模块数量
        moduleNum(row, column, cellValue, index) {
            let num;
            $.ajax({
                url: `${this.$BASEURL}/api/getModuleNum/`,
                type: "GET",
                dataType: "json",   //返回格式为json
                async: false,
                data: {'projectId': cellValue},
                success: function (res) {
                    console.log(res);
                    num = res.moduleNum
                }
            });
            return num
        },
        // 项目搜索
        search() {
            this.$axios.get("api/searchProject/", {params: {"searchInfo": this.searchInfo}})
                .then(res => {
                    console.log(res);
                    if (res.data.msgCode === "1") {
                        console.log("查询数据成功");
                        this.tableData = res.data.projectList;
                        this.total = res.data.projectNum;
                        this.searchInfo.currentPage = res.data.currentPage //保持前后端页码一致

                    } else {
                        console.log("查询数据失败");
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.searchInfo.pageSize = val;
            this.$axios.get("api/searchProject/", {params: {"searchInfo": this.searchInfo}})
                .then(res => {
                    console.log(res);
                    if (res.data.msgCode === "1") {
                        console.log("查询数据成功");
                        this.tableData = res.data.projectList;
                        this.total = res.data.projectNum;
                    } else {
                        console.log("查询数据失败");
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.searchInfo.currentPage = val;
            this.$axios.get("api/searchProject/", {params: {"searchInfo": this.searchInfo}})
                .then(res => {
                    console.log(res);
                    if (res.data.msgCode === "1") {
                        console.log("查询数据成功");
                        this.tableData = res.data.projectList;
                        this.total = res.data.projectNum;
                    } else {
                        console.log("查询数据失败");
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        },
        // 页面返回
        goBack() {
            console.log('go back');
            this.$router.back();
        },
    },
    created() {
        this.getInfo()
    }
}
</script>

<style scoped>
  .interval {
    margin: 10px auto;
  }

  #list {
    margin: 10px 30px;
  }

</style>
